<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./village.css">
</head>

<body>
    <div class="top">
        <img class="bg-top" src="../static/bg-top.png" alt="bg">
        <p>狮山镇下柏社区村委端</p>
        <img src="../static/logo.png" alt="logo" class="logo">

        <div class="time-weather">
            <div class="time-box time-box-after">
                <div class="time">{{time}}</div>
                <div class="date">{{date}}</div>
            </div>
            <div class="weather-box">
                <div class="weather">{{weather}}</div>
                <div class="temperature">{{temperature}}</div>
            </div>
        </div>
    </div>
    <div class="nav-data-list">
        <img src="../static/decorate-left.png" alt="decorate" class="decorate">
        <div class="nav-data-item">
            <div>月卡用户</div>
            <div class="blue">5789</div>
            <div>
                <div>黑名单：<text class="blue">232</text></div>
                <div>白名单：<text class="blue">5678</text></div>
            </div>
        </div>
        <div class="nav-data-item">
            <div>今日巡更</div>
            <div class="blue">20</div>
            <div>
                <div>本周巡更：<text class="blue">232</text></div>
                <div>本月巡更：<text class="blue">480</text></div>
            </div>
        </div>
        <div class="nav-data-item">
            <div>本月日常查处</div>
            <div class="orange">666</div>
            <div>
                <div>待指派：<text class="orange">232</text></div>
                <div>跟进中：<text class="white">380</text></div>
                <div>已完成：<text class="blue">54</text></div>
            </div>
        </div>
        <div class="nav-data-item">
            <div>本月投诉建议</div>
            <div class="orange">384</div>
            <div>
                <div>待指派：<text class="orange">232</text></div>
                <div>跟进中：<text class="white">380</text></div>
                <div>已完成：<text class="blue">54</text></div>
            </div>
        </div>
        <div class="nav-data-item">
            <div>本月逃欠金额(元)</div>
            <div class="yellow">16888.89</div>
            <div>
                <div>逃费次数：<text class="blue">232</text></div>
                <!-- <div>逃费金额：<text class="blue">¥{{homeTopData.dodgeFee}}</text></div> -->
            </div>
        </div>
        <img src="../static/decorate-right.png" alt="decorate" class="decorate">
    </div>

    <div class="tsjy-box">
        <div class="box-title">
            <div class="triangle"></div>
            <div>投诉建议</div>
            <div>查看详情</div>
        </div>
        <div class="box-main">
            <div class="tsjy-nav-list">
                <div class="tsjy-nav-item">
                    <img src="../static/icon-04.png" alt="icon" class="icon">
                    <div class="dark-blue">128</div>
                    <div>总数</div>
                </div>
                <div class="tsjy-nav-item">
                    <img src="../static/icon-05.png" alt="icon" class="icon">
                    <div class="white">25</div>
                    <div>待指派</div>
                </div>
                <div class="tsjy-nav-item">
                    <img src="../static/icon-06.png" alt="icon" class="icon">
                    <div class="blue">53</div>
                    <div>跟进中</div>
                </div>
                <div class="tsjy-nav-item">
                    <img src="../static/icon-07.png" alt="icon" class="icon">
                    <div class="blue">50</div>
                    <div>已完成</div>
                </div>
            </div>

            <div class="tsjy-echart-list">
                <div id="tsjy-echart-left" ref="tsjyEchartLeft"></div>
                <div id="tsjy-echart-right" ref="tsjyEchartRight"></div>
            </div>

        </div>
    </div>

    <div class="clll-box">
        <div class="box-title">
            <div class="triangle"></div>
            <div>车辆流量</div>
            <div>查看详情</div>
        </div>
        <div class="box-main">
            <div class="main-data-list">
                <div>
                    <div class="blue">50</div>
                    <div>今日入场数</div>
                </div>
                <div>
                    <div class="blue">785</div>
                    <div>本周入场数</div>
                </div>
                <div>
                    <div class="blue">8785</div>
                    <div>本月入场数</div>
                </div>
                <div>
                    <div class="orange">2785.12</div>
                    <div>本月实收金额</div>
                </div>
                <div>
                    <div class="yellow">8785</div>
                    <div>本月优惠金额</div>
                </div>
            </div>
            <div class="select-time">
                <div @click="showClllTime = !showClllTime">2023年11月</div>
                <div @click="showClllTime = !showClllTime" class="arrows-dowm"></div>

                <!-- <picker-view class="pick-time" indicator-class="pitch-item" mask-style='background: rgba(0, 0, 0, 0)'
                    indicator-style="height: 32px;" v-if="showClllTime" :value="clllTime" @change="changeClllTime">
                    <picker-view-column>
                        <view v-for="item of yearList" class="pick-item">{{item}}年</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view v-for="item of monthList" class="pick-item">{{item}}月</view>
                    </picker-view-column>
                </picker-view> -->
            </div>
            <div id="clll-echart" ref="clllEchart"></div>
        </div>
    </div>

    <div class="rcgl-box">
        <div class="box-title">
            <div class="triangle"></div>
            <div>日常管理</div>
            <div>查看详情</div>
        </div>
        <div class="box-main">
            <div class="main-data-list">
                <div>
                    <div class="blue">25</div>
                    <div>今日查处</div>
                </div>
                <div>
                    <div class="blue">53</div>
                    <div>本周查处</div>
                </div>
                <div>
                    <div class="blue">329</div>
                    <div>本月查处</div>
                </div>
            </div>
            <div class="select-time">
                <div @click="showRcglTime = !showRcglTime">2023年11月</div>
                <div @click="showRcglTime = !showRcglTime" class="arrows-dowm"></div>

                <!-- <picker-view class="pick-time" indicator-class="pitch-item" mask-style='background: rgba(0, 0, 0, 0)'
                    indicator-style="height: 32px;" v-if="showRcglTime" :value="rcglTime" @change="changeRcglTime">
                    <picker-view-column>
                        <view v-for="item of yearList" class="pick-item">{{item}}年</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view v-for="item of monthList" class="pick-item">{{item}}月</view>
                    </picker-view-column>
                </picker-view> -->
            </div>
            <div id="rcgl-echart-left" ref="rcglEchartLeft"></div>
            <div id="rcgl-echart-right" ref="rcglEchartRight"></div>
        </div>
    </div>

    <img src="../static/bg-bottom.png" alt="bottom" class="bottom-img">
</body>

</html>